<template>
    <div class="xuanxue-page" :class="currentTheme">
      <div class="header">
        <div class="theme-switcher">
          <span 
            v-for="theme in themes" 
            :key="theme.name"
            @click="currentTheme = theme.name"
            :class="{active: currentTheme === theme.name}"
            :title="theme.label"
          >
            {{ theme.icon }}
          </span>
        </div>
        <h1>✨ 玄学决策助手 ✨</h1>
        <div class="header-decoration">
          <span class="decoration-item">🔮</span>
          <span class="decoration-item">🌟</span>
          <span class="decoration-item">🌙</span>
          <span class="decoration-item">💫</span>
        </div>
      </div>
      
      <div class="input-container">
        <div class="crystal-ball">
          <textarea 
            v-model="userInput" 
            placeholder="输入你的选择难题，如：创业 or 安稳工作"
            @focus="animateCrystalBall(true)"
            @blur="animateCrystalBall(false)"
          ></textarea>
          <div class="crystal-glow" :class="{active: isCrystalActive}"></div>
          <div class="crystal-sparkles">
            <span v-for="i in 5" :key="i" class="sparkle"></span>
          </div>
        </div>
        
        <div class="button-group">
          <button @click="getAdvice" class="magic-button" :disabled="!userInput || loading">
            <span v-if="!loading">✨ 获取玄学建议 ✨</span>
            <span v-else class="loading-spinner">🔮</span>
          </button>
          <button @click="getAdvice(2)" class="magic-button secondary" :disabled="!userInput || loading">
            <span v-if="!loading">🌟 回答示例 🌟</span>
            <span v-else class="loading-spinner">🔮</span>
          </button>
        </div>
      </div>
      
      <div v-if="loading" class="mask">
        <div class="loading-message">
          <div class="loading-spinner big">✨</div>
          <p>正在召唤玄学力量...</p>
          <div class="magic-dust">
            <span v-for="i in 12" :key="i" class="dust-particle"></span>
          </div>
        </div>
      </div>
      
      <div v-if="error" class="error-toast">{{ error }}</div>
      
      <div v-if="result" class="result-section">
        <h2>🔮 玄学建议 🔮</h2>
        <div class="result-decoration">
          <span>✨</span>
          <span>🔮</span>
          <span>🌟</span>
          <span>🌙</span>
        </div>
        <div class="result-container">
          <div class="marked-content" v-html="processedResult"></div>
        </div>
        <div class="result-footer">
          <p>愿这份指引为你带来启发</p>
          <div class="footer-stars">
            <span v-for="i in 5" :key="i">⭐</span>
          </div>
        </div>
      </div>
    </div>
  </template>
  
  <script>
  import axios from 'axios';
  import Marked from 'marked';
  
  export default {
    data() {
      return {
        // 用户输入的选择问题
        userInput: '自由工作者 or 上班稳定工作者',
        // 是否正在加载中
        loading: false,
        // 错误信息
        error: null, 
        // 返回的结果
        result: null,
        // 水晶球是否处于激活状态
        isCrystalActive: false,
        // 当前主题
        currentTheme: 'dark',
        // 主题列表配置
        themes: [
          { name: 'dark', label: '星空主题', icon: '🌌' },
          { name: 'light', label: '阳光主题', icon: '🌞' },
          { name: 'mystic', label: '神秘主题', icon: '🔮' },
          { name: 'pastel', label: '梦幻主题', icon: '🌈' }
        ]      };
    },
    computed: {
      processedResult() {
        return Marked.parse(this.result || '');
      }
    },
    methods: {
      selectTheme(theme) {
        this.currentTheme = theme;
        localStorage.setItem('xuanxueTheme', theme);
      },
      animateCrystalBall(active) {
        this.isCrystalActive = active;
      },
      async getAdvice(flag) {
        if (flag === 2) {
          this.defaultAnswer();
          return
        }
        if (!this.userInput.trim()) {
          this.error = '请输入你的选择难题';
          return;
        }
        
        this.loading = true;
        this.error = null;
        
        try {
          const response = await axios.post('https://api.siliconflow.cn/v1/chat/completions', {
            model: 'THUDM/GLM-4-32B-0414',
            messages: [{
              role: 'user',
              content: `请用玄学风格（塔罗牌或周易）回答以下问题：${this.userInput}`
            }],
            temperature: 0.7,
            max_tokens: 2048
          }, {
            headers: {
              'Content-Type': 'application/json',
              'Authorization': 'Bearer '+ process.env.VUE_APP_API_KEY
            }
          });
          
          if (response.data.choices && response.data.choices[0].message.content) {
            this.result = response.data.choices[0].message.content;
            localStorage.setItem('lastAdvice', JSON.stringify({
              input: this.userInput,
              result: this.result
            }));
          } else {
            this.error = '玄学能量不足，请稍后再试';
          }
        } catch (error) {
          this.error = '玄学服务器遇到了一些小麻烦';
          console.error(error);
        } finally {
          this.loading = false;
        }
      },
      defaultAnswer() {
        this.userInput = '自由工作者 or 上班稳定工作者';
        let response = {
      "id": "0196e3f9e8ae119d8c0014be29d446cc",
      "object": "chat.completion",
      "created": 1747581528,
      "model": "THUDM/GLM-4-32B-0414",
      "choices": [
          {
              "index": 0,
              "message": {
                  "role": "assistant",
                  "content": "\n好的，请静心凝神，让我们借助古老的智慧来窥探你选择的路径。\n\n**方式一：塔罗牌视角**\n\n摊开牌阵，几张具有代表性的牌映入眼帘：\n\n1.  **代表自由工作者：** **愚人 (The Fool)** 或 **星星 (The Star)**\n    *   **愚人：** 他代表着全新的开始，无畏的探索精神，不受拘束，带着一点冲动和无限的可能性。选择这条路，意味着拥抱未知，享受旅程本身，但也可能需要面对未雨绸缪的考验。它呼唤着勇气和随性，相信直觉和冒险。\n    *   **星星：** 这张牌散发着希望、灵感与疗愈的光芒。它暗示着通过自己的方式发光发热，找到内心的指引和方向，带来内心的平静与满足。选择这条路，可能意味着你渴望用自己的节奏创造价值，追求精神层面的富足和自我实现，如同在夜空中找到属于自己的那颗星。\n\n2.  **代表上班稳定工作者：** **节制 (Temperance)** 或 **太阳 (The Sun)**（在稳定结构下的解读）\n    *   **节制：** 这位天使代表着平衡、耐心和循序渐进。它意味着在规则和框架内工作，需要调和不同的元素（如个人意愿与公司要求），通过持续的调整和努力获得成果。选择这条路，是为了寻求稳定、秩序和可控性，愿意为了安全感而付出纪律和耐心的代价。\n    *   **太阳 (稳定解读)：** 在稳定的结构下，太阳象征着清晰的路径、明确的成就和积极的认可。它代表着在组织中发光发热，享受团队合作带来的温暖和肯定，有规则可循，有阶梯可攀。选择这条路，是为了获得可见的、可靠的回报，体验 belonging 和归属感。\n\n**解读与指引：**\n\n塔罗牌提示你，自由工作者的道路充满了 **可能性、创造性和内在指引**，但也伴随着 **不确定性**。你需要的是 **勇气**（愚人）和 **清晰的自我认知**（星星），准备好迎接风雨，也享受晴空。\n\n而稳定上班的道路则代表着 **平衡、秩序和可见的成就**，它提供了 **安全感和可预测性**。你需要的是 **耐心**（节制）和 **适应能力**，在既定的轨道上稳步前行，享受团队和规则带来的 **稳定光芒**（太阳）。\n\n**方式二：周易视角**\n\n抛下蓍草或掷出三枚铜钱，得到一卦，例如 **《恒》卦 (雷风恒，巽上震下)** 或 **《豫》卦 (雷地豫，坤上震下)**。\n\n*   **《恒》卦 (雷风恒)**：\n    *   **卦辞大意：** 亨通。利于贞固，利于娶妻。（长久坚持，持之以恒，会亨通顺利。）\n    *   **象征意义：** 恒，即持久、恒常。此卦上巽为风、为顺，下震为雷、为动。象征在变动中寻求恒常，在顺境中也要保持行动。它暗示着无论选择哪条路，都需要 **持之以恒** 的态度。\n    *   **对选择的启示：** 如果选择 **自由工作者**，这卦提示你需要建立 **恒久的工作模式和方法**，即使环境多变，也要有持续产出和自我管理的恒心，如同风雷并作，既要顺应环境（风），也要保持行动力（雷）。寻找能长久坚持的事业方向。\n    *   **对选择的启示：** 如果选择 **上班稳定工作者**，这卦强调在稳定的组织中，也要有 **恒心** 和 **耐心**。不要因为稳定而懈怠，要在岗位上持续学习、积累、贡献，保持长久的服务精神和价值创造，才能获得持续的好运和认可。\n\n*   **《豫》卦 (雷地豫)**：\n    *   **卦辞大意：** 利于建侯行师。（象征喜悦、顺从，行动有利。）\n    *   **象征意义：** 豫，即喜悦、顺从、预备。上坤为地、为顺，下震为雷、为动。象征顺应形势，预备行动，带来喜悦和成功。\n    *   **对选择的启示：** 如果选择 **自由工作者**，这卦提示你需要 **顺应市场变化和个人兴趣**，预先规划好资源，灵活行动，你的努力和准备将带来喜悦和成就。享受自己主导带来的快乐。\n    *   **对选择的启示：** 如果选择 **上班稳定工作者**，这卦意味着在组织中，要 **顺应上级和团队**，做好充分准备，积极响应，你的配合和努力将带来顺遂和快乐，获得认可和喜悦。\n\n**总结指引：**\n\n古老的智慧并非给出唯一答案，而是帮助你 **审视内在**。\n\n*   你是更渴望 **风雷并作、自我驱动、拥抱无限可能** 的 **恒、豫** 中的自由探索者？\n*   还是更倾向于 **在地之上有序行动、寻求团队归属、在稳定中积累喜悦** 的 **恒、豫** 中的踏实建设者？\n\n请倾听你内心深处真正的声音。无论选择哪条路，都需要 **恒心 (恒)** 和 **预备 (豫)** 的智慧。塔罗和周易都强调，重要的不是路径本身，而是你选择后的 **态度** 和 **行动**。祝你得你所选，行稳致远。"
              },
              "finish_reason": "stop"
          }
      ],
      "usage": {
          "prompt_tokens": 28,
          "completion_tokens": 1136,
          "total_tokens": 1164
      },
      "system_fingerprint": ""
  }    
     // response = JSON.parse(response);
        this.result = response.choices[0].message.content;
  
      }
    },
    mounted() {
      const savedTheme = localStorage.getItem('xuanxueTheme');
      if (savedTheme) {
        this.currentTheme = savedTheme;
      }
      const lastAdvice = localStorage.getItem('lastAdvice');
      if (lastAdvice) {
        const { input, result } = JSON.parse(lastAdvice);
        this.userInput = input;
        this.result = result;
      }
    }
  };
  </script>
  
  <style scoped>
  /* 主题颜色定义 */
  .dark {
    --primary-color: #9c7aff;
    --secondary-color: #5f27cd;
    --bg-gradient: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    --text-color: #e2e2e2;
    --input-bg: rgba(28, 28, 46, 0.7);
    --card-bg: rgba(28, 28, 46, 0.7);
    --border-color: #9c7aff;
    --glow-color: rgba(156, 122, 255, 0.5);
    --button-gradient: linear-gradient(45deg, #9c7aff, #5f27cd);
    --footer-color: #9c7aff;
  }
  
  .light {
    --primary-color: #ff6b6b;
    --secondary-color: #48dbfb;
    --bg-gradient: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    --text-color: #333;
    --input-bg: rgba(255, 255, 255, 0.9);
    --card-bg: rgba(255, 255, 255, 0.9);
    --border-color: #ff6b6b;
    --glow-color: rgba(255, 107, 107, 0.5);
    --button-gradient: linear-gradient(45deg, #ff6b6b, #48dbfb);
    --footer-color: #5f27cd;
  }
  
  .mystic {
    --primary-color: #1dd1a1;
    --secondary-color: #2e86de;
    --bg-gradient: linear-gradient(135deg, #0f2027 0%, #203a43 50%, #2c5364 100%);
    --text-color: #e2e2e2;
    --input-bg: rgba(15, 32, 39, 0.7);
    --card-bg: rgba(15, 32, 39, 0.7);
    --border-color: #1dd1a1;
    --glow-color: rgba(29, 209, 161, 0.5);
    --button-gradient: linear-gradient(45deg, #1dd1a1, #2e86de);
    --footer-color: #1dd1a1;
  }
  
  .pastel {
    --primary-color: #ff9ff3;
    --secondary-color: #feca57;
    --bg-gradient: linear-gradient(135deg, #fdcbf1 0%, #e6dee9 100%);
    --text-color: #5f27cd;
    --input-bg: rgba(255, 255, 255, 0.9);
    --card-bg: rgba(255, 255, 255, 0.9);
    --border-color: #ff9ff3;
    --glow-color: rgba(255, 159, 243, 0.5);
    --button-gradient: linear-gradient(45deg, #ff9ff3, #feca57);
    --footer-color: #5f27cd;
  }
  
  /* 基础样式 */
  .xuanxue-page {
    padding: 20px;
    max-width: 800px;
    margin: 0 auto;
    font-family: 'Arial', sans-serif;
    min-height: 100vh;
    transition: all 0.5s ease;
    background: var(--bg-gradient);
    color: var(--text-color);
  }
  
  /* 主题切换器 */
  .theme-switcher {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-bottom: 20px;
  }
  
  .theme-switcher span {
    padding: 10px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 24px;
    transition: all 0.3s ease;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
    background: rgba(255, 255, 255, 0.2);
  }
  
  .theme-switcher span:hover {
    transform: scale(1.1) rotate(10deg);
    box-shadow: 0 0 15px currentColor;
  }
  
  .theme-switcher span.active {
    transform: scale(1.2) rotate(0deg);
    box-shadow: 0 0 20px currentColor;
    animation: bounce 0.5s;
    background: rgba(255, 255, 255, 0.4);
  }
  
  @keyframes bounce {
    0%, 100% { transform: scale(1.2); }
    50% { transform: scale(1.3); }
  }
  
  /* 头部样式 */
  .header {
    text-align: center;
    margin-bottom: 30px;
  }
  
  .header h1 {
    color: var(--primary-color);
    font-size: 32px;
    margin-bottom: 10px;
    text-shadow: 0 0 10px var(--glow-color);
    position: relative;
    display: inline-block;
  }
  
  .header-decoration {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 15px;
  }
  
  .decoration-item {
    font-size: 24px;
    animation: float 3s infinite ease-in-out;
    cursor: default;
  }
  
  .decoration-item:nth-child(1) {
    color: #ff9ff3;
    animation-delay: 0s;
  }
  
  .decoration-item:nth-child(2) {
    color: #feca57;
    animation-delay: 0.5s;
  }
  
  .decoration-item:nth-child(3) {
    color: #1dd1a1;
    animation-delay: 1s;
  }
  
  .decoration-item:nth-child(4) {
    color: #5f27cd;
    animation-delay: 1.5s;
  }
  
  @keyframes float {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-10px) rotate(5deg); }
  }
  
  /* 输入区域 */
  .input-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 25px;
    margin: 30px 0;
  }
  
  /* 水晶球样式 */
  .crystal-ball {
    position: relative;
    width: 100%;
    max-width: 600px;
    perspective: 1000px;
  }
  
  .crystal-ball textarea {
    width: 90%;
    height: 150px;
    padding: 20px;
    border-radius: 20px;
    border: 2px solid var(--border-color);
    background-color: var(--input-bg);
    color: var(--text-color);
    font-size: 16px;
    resize: none;
    outline: none;
    transition: all 0.3s ease;
    position: relative;
    z-index: 2;
    box-shadow: 0 0 15px rgba(0,0,0,0.1);
    backdrop-filter: blur(5px);
  }
  
  .crystal-glow {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 20px;
    background: radial-gradient(circle, var(--glow-color) 0%, transparent 70%);
    opacity: 0;
    transition: all 0.5s ease;
    z-index: 1;
    animation: pulse 2s infinite alternate;
  }
  
  .crystal-glow.active {
    opacity: 0.7;
    transform: scale(1.02);
    box-shadow: 0 0 30px var(--glow-color);
  }
  
  .crystal-sparkles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 3;
  }
  
  .sparkle {
    position: absolute;
    width: 6px;
    height: 6px;
    background-color: white;
    border-radius: 50%;
    opacity: 0;
    animation: sparkle 2s infinite;
  }
  
  .sparkle:nth-child(1) {
    top: 20%;
    left: 15%;
    animation-delay: 0.2s;
  }
  .sparkle:nth-child(2) {
    top: 30%;
    left: 80%;
    animation-delay: 0.5s;
  }
  .sparkle:nth-child(3) {
    top: 70%;
    left: 20%;
    animation-delay: 0.8s;
  }
  .sparkle:nth-child(4) {
    top: 60%;
    left: 65%;
    animation-delay: 1.1s;
  }
  .sparkle:nth-child(5) {
    top: 40%;
    left: 40%;
    animation-delay: 1.4s;
  }
  
  @keyframes sparkle {
    0% { transform: scale(0); opacity: 0; }
    50% { transform: scale(1); opacity: 0.8; }
    100% { transform: scale(0); opacity: 0; }
  }
  
  @keyframes pulse {
    0% { opacity: 0.3; }
    100% { opacity: 0.7; }
  }
  
  /* 按钮组 */
  .button-group {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    justify-content: center;
  }
  
  /* 魔法按钮 */
  .magic-button {
    background: var(--button-gradient);
    color: white;
    border: none;
    border-radius: 50px;
    padding: 15px 40px;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 0 15px var(--glow-color);
    position: relative;
    overflow: hidden;
    min-width: 200px;
    text-shadow: 0 0 5px rgba(0,0,0,0.3);
  }
  
  .magic-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 0 25px var(--glow-color);
  }
  
  .magic-button::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: rgba(255, 255, 255, 0.2);
    transform: rotate(45deg);
    animation: shine 3s infinite;
  }
  
  .magic-button.secondary {
    background: linear-gradient(45deg, var(--secondary-color), var(--primary-color));
  }
  
  @keyframes shine {
    0% { transform: translateX(-100%) rotate(45deg); }
    100% { transform: translateX(100%) rotate(45deg); }
  }
  
  .magic-button:disabled {
    background: linear-gradient(45deg, #666, #999);
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
  }
  
  /* 加载动画 */
  .loading-spinner {
    display: inline-block;
    animation: spin 1s linear infinite;
  }
  
  .loading-spinner.big {
    font-size: 50px;
    color: white;
    margin-bottom: 20px;
  }
  
  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }
  
  .mask {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 999;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .loading-message {
    text-align: center;
    color: white;
    position: relative;
  }
  
  .loading-message p {
    margin-top: 15px;
    font-size: 20px;
  }
  
  .magic-dust {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
  }
  
  .dust-particle {
    position: absolute;
    width: 8px;
    height: 8px;
    background-color: white;
    border-radius: 50%;
    opacity: 0;
    animation: dust 3s infinite linear;
  }
  
  .dust-particle:nth-child(1) {
    top: 20%;
    left: 10%;
    animation-delay: 0s;
  }
  .dust-particle:nth-child(2) {
    top: 30%;
    left: 30%;
    animation-delay: 0.5s;
  }
  .dust-particle:nth-child(3) {
    top: 10%;
    left: 60%;
    animation-delay: 1s;
  }
  .dust-particle:nth-child(4) {
    top: 40%;
    left: 80%;
    animation-delay: 1.5s;
  }
  .dust-particle:nth-child(5) {
    top: 70%;
    left: 20%;
    animation-delay: 2s;
  }
  .dust-particle:nth-child(6) {
    top: 60%;
    left: 50%;
    animation-delay: 2.5s;
  }
  .dust-particle:nth-child(7) {
    top: 80%;
    left: 70%;
    animation-delay: 0.7s;
  }
  .dust-particle:nth-child(8) {
    top: 20%;
    left: 90%;
    animation-delay: 1.2s;
  }
  .dust-particle:nth-child(9) {
    top: 50%;
    left: 10%;
    animation-delay: 1.7s;
  }
  .dust-particle:nth-child(10) {
    top: 30%;
    left: 70%;
    animation-delay: 2.2s;
  }
  .dust-particle:nth-child(11) {
    top: 70%;
    left: 40%;
    animation-delay: 0.3s;
  }
  .dust-particle:nth-child(12) {
    top: 90%;
    left: 60%;
    animation-delay: 0.8s;
  }
  
  @keyframes dust {
    0% { transform: translateY(0) scale(0); opacity: 0; }
    20% { opacity: 0.8; transform: translateY(-20px) scale(1); }
    100% { transform: translateY(-100px) scale(0); opacity: 0; }
  }
  
  /* 错误提示 */
  .error-toast {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #ff6b6b;
    color: white;
    padding: 15px 30px;
    border-radius: 50px;
    box-shadow: 0 0 20px rgba(255, 107, 107, 0.5);
    animation: fadeIn 0.3s;
    z-index: 1000;
  }
  
  @keyframes fadeIn {
    from { opacity: 0; transform: translate(-50%, 20px); }
    to { opacity: 1; transform: translate(-50%, 0); }
  }
  
  /* 结果区域 */
  .result-section {
    margin-top: 40px;
    position: relative;
    text-align: left;
    animation: fadeInUp 0.5s;
  }
  
  @keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
  }
  
  .result-decoration {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin: 20px 0;
  }
  
  .result-decoration span {
    font-size: 28px;
    animation: float 3s infinite ease-in-out;
    cursor: default;
  }
  
  .result-decoration span:nth-child(1) {
    color: #ff9ff3;
    animation-delay: 0s;
  }
  
  .result-decoration span:nth-child(2) {
    color: #feca57;
    animation-delay: 0.5s;
  }
  
  .result-decoration span:nth-child(3) {
    color: #1dd1a1;
    animation-delay: 1s;
  }
  
  .result-decoration span:nth-child(4) {
    color: #5f27cd;
    animation-delay: 1.5s;
  }
  
  .result-footer {
    text-align: center;
    margin-top: 30px;
    font-style: italic;
    opacity: 0.8;
    color: var(--footer-color);
    font-size: 18px;
  }
  
  .footer-stars {
    margin-top: 10px;
  }
  
  .footer-stars span {
    margin: 0 5px;
    animation: twinkle 2s infinite;
  }
  
  .footer-stars span:nth-child(1) { animation-delay: 0s; }
  .footer-stars span:nth-child(2) { animation-delay: 0.2s; }
  .footer-stars span:nth-child(3) { animation-delay: 0.4s; }
  .footer-stars span:nth-child(4) { animation-delay: 0.6s; }
  .footer-stars span:nth-child(5) { animation-delay: 0.8s; }
  
  @keyframes twinkle {
    0%, 100% { opacity: 0.5; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.2); }
  }
  
  .result-section h2 {
    text-align: center;
    color: var(--primary-color);
    margin-bottom: 25px;
    font-size: 28px;
    text-shadow: 0 0 10px var(--glow-color);
  }
  
  .result-container {
    background-color: var(--card-bg);
    padding: 30px;
    border-radius: 20px;
    border: 1px solid var(--border-color);
    box-shadow: 0 0 20px rgba(0,0,0,0.1);
    backdrop-filter: blur(5px);
  }
  
  .marked-content {
    line-height: 1.8;
  }
  
  .marked-content >>> p {
    margin-bottom: 20px;
  }
  
  .marked-content >>> strong {
    color: var(--primary-color);
  }
  
  /* 响应式设计 */
  @media (max-width: 600px) {
    .xuanxue-page {
      padding: 15px;
    }
    
    .header h1 {
      font-size: 26px;
    }
    
    .crystal-ball textarea {
      height: 120px;
      padding: 15px;
    }
    
    .button-group {
      flex-direction: column;
      width: 100%;
    }
    
    .magic-button {
      width: 100%;
    }
    
    .result-container {
      padding: 20px;
    }
  }
  </style>
<template>
  <div class="xuanxue-page" :class="currentTheme">
    <!-- 页面头部 -->
    <div class="header">
      <!-- 主题切换器 -->
      <div class="theme-switcher">
        <span 
          v-for="theme in themes" 
          :key="theme.name"
          @click="currentTheme = theme.name"
          :class="{active: currentTheme === theme.name}"
          :title="theme.label"
        >
          {{ theme.icon }}
        </span>
      </div>
      <h1>✨ 玄学决策助手 ✨</h1>
      <!-- 头部装饰 -->
      <div class="header-decoration">
        <span class="decoration-item">🔮</span>
        <span class="decoration-item">🌟</span>
        <span class="decoration-item">🌙</span>
        <span class="decoration-item">💫</span>
      </div>
    </div>
    
    <!-- 输入区域 -->
    <div class="input-container">
      <!-- 水晶球输入框 -->
      <div class="crystal-ball">
        <textarea 
          v-model="userInput" 
          placeholder="输入你的选择难题，如：创业 or 安稳工作"
          @focus="animateCrystalBall(true)"
          @blur="animateCrystalBall(false)"
        ></textarea>
        <div class="crystal-glow" :class="{active: isCrystalActive}"></div>
        <div class="crystal-sparkles">
          <span v-for="i in 5" :key="i" class="sparkle"></span>
        </div>
      </div>
      
      <!-- 按钮组 -->
      <div class="button-group">
        <button @click="getAdvice" class="magic-button" :disabled="!userInput || loading">
          <span v-if="!loading">✨ 获取玄学建议 ✨</span>
          <span v-else class="loading-spinner">🔮</span>
        </button>
        <button @click="getAdvice(2)" class="magic-button secondary" :disabled="!userInput || loading">
          <span v-if="!loading">🌟 回答示例 🌟</span>
          <span v-else class="loading-spinner">🔮</span>
        </button>
      </div>
    </div>
    
    <!-- 加载遮罩 -->
    <div v-if="loading" class="mask">
      <div class="loading-message">
        <div class="loading-spinner big">✨</div>
        <p>正在召唤玄学力量...</p>
        <div class="magic-dust">
          <span v-for="i in 12" :key="i" class="dust-particle"></span>
        </div>
      </div>
    </div>
    
    <!-- 错误提示 -->
    <div v-if="error" class="error-toast">{{ error }}</div>
    
    <!-- 结果展示区域 -->
    <div v-if="result" class="result-section">
      <h2>🔮 玄学建议 🔮</h2>
      <div class="result-decoration">
        <span>✨</span>
        <span>🔮</span>
        <span>🌟</span>
        <span>🌙</span>
      </div>
      <div class="result-container">
        <div class="marked-content" v-html="processedResult"></div>
      </div>
      <div class="result-footer">
        <p>愿这份指引为你带来启发</p>
        <div class="footer-stars">
          <span v-for="i in 5" :key="i">⭐</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios';
import Marked from 'marked';

export default {
  data() {
    return {
      // 用户输入的选择问题
      userInput: '自由工作者 or 上班稳定工作者',
      // 是否正在加载中
      loading: false,
      // 错误信息
      error: null, 
      // 返回的结果
      result: null,
      // 水晶球是否处于激活状态
      isCrystalActive: false,
      // 当前主题
      currentTheme: 'dark',
      // 主题列表配置
      themes: [
        { name: 'dark', label: '星空主题', icon: '🌌' },
        { name: 'light', label: '阳光主题', icon: '🌞' },
        { name: 'mystic', label: '神秘主题', icon: '🔮' },
        { name: 'pastel', label: '梦幻主题', icon: '🌈' }
      ]
    };
  },

  computed: {
    // 处理返回结果,将markdown格式转换为HTML
    processedResult() {
      return Marked.parse(this.result || '');
    }
  },

  methods: {
    /**
     * 选择并保存主题
     * @param {string} theme - 主题名称
     */
    selectTheme(theme) {
      this.currentTheme = theme;
      localStorage.setItem('xuanxueTheme', theme);
    },

    /**
     * 控制水晶球动画效果
     * @param {boolean} active - 是否激活
     */
    animateCrystalBall(active) {
      this.isCrystalActive = active;
    },

    /**
     * 获取玄学建议
     * @param {number} flag - 标识是否使用示例回答
     */
    async getAdvice(flag) {
      if (flag === 2) {
        this.defaultAnswer();
        return
      }

      if (!this.userInput.trim()) {
        this.error = '请输入你的选择难题';
        return;
      }
      
      this.loading = true;
      this.error = null;
      
      try {
        const response = await axios.post('https://api.siliconflow.cn/v1/chat/completions', {
          model: 'THUDM/GLM-4-32B-0414',
          messages: [{
            role: 'user',
            content: `请用玄学风格（塔罗牌或周易）回答以下问题：${this.userInput}`
          }],
          temperature: 0.7,
          max_tokens: 2048
        }, {
          headers: {
            'Content-Type': 'application/json',
            'Authorization': 'Bearer '+ process.env.VUE_APP_API_KEY
          }
        });
        
        if (response.data.choices && response.data.choices[0].message.content) {
          this.result = response.data.choices[0].message.content;
          localStorage.setItem('lastAdvice', JSON.stringify({
            input: this.userInput,
            result: this.result
          }));
        } else {
          this.error = '玄学能量不足，请稍后再试';
        }
      } catch (error) {
        this.error = '玄学服务器遇到了一些小麻烦';
        console.error(error);
      } finally {
        this.loading = false;
      }
    },

    /**
     * 显示默认示例回答
     */
    defaultAnswer() {
      this.userInput = '自由工作者 or 上班稳定工作者';
      let response = {
        "id": "0196e3f9e8ae119d8c0014be29d446cc",
        "object": "chat.completion",
        "created": 1747581528,
        "model": "THUDM/GLM-4-32B-0414",
        "choices": [
          {
            "index": 0,
            "message": {
              "role": "assistant",
              "content": "..."  // 内容省略
            },
            "finish_reason": "stop"
          }
        ],
        "usage": {
          "prompt_tokens": 28,
          "completion_tokens": 1136,
          "total_tokens": 1164
        },
        "system_fingerprint": ""
      }
      this.result = response.choices[0].message.content;
    }
  },

  /**
   * 组件挂载时加载保存的主题和上次的建议
   */
  mounted() {
    // 加载保存的主题
    const savedTheme = localStorage.getItem('xuanxueTheme');
    if (savedTheme) {
      this.currentTheme = savedTheme;
    }

    // 加载上次的建议
    const lastAdvice = localStorage.getItem('lastAdvice');
    if (lastAdvice) {
      const { input, result } = JSON.parse(lastAdvice);
      this.userInput = input;
      this.result = result;
    }
  }
};
</script>

<style scoped>
/* 样式部分保持不变 */
</style>
